<template>
  <div id="chart" style="width: 100%;height:100%;"></div>
</template>

<script>
import { getDicts } from '../../../api/system/dict/data'
import {  bubbleSort2 } from '@/utils/utils'

export default {
  name: "echart2",
  data(){
    return{
      data_value: [],
      data_name: [],
    }
  },
  mounted() {
    this.getChartData()
  },
  methods:{
    //获取图表数据
    getChartData(){
      const response =  getDicts("map_enterprise_ranking").then(response => {
        const data = bubbleSort2(response.data)
        this.data_value = data.map(item => item.dictValue)
        this.data_name = data.map(item => item.dictLabel)
        this.initEcharts1()
      })
    },
    initEcharts1(){
      const myChart = this.$echarts.init(document.getElementById('chart'), null, {devicePixelRatio: 2.5});
      // 指定图表的配置项和数据
      let data = this.data_value;
      let titlename = this.data_name;
      let values = []
      for (let i = 0; i < data.length; i++) {
        values.push(100)
      }
      let valdata = [];
      let myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"];
      let option = {
        //图标位置
        grid: {
          top: "10%",
          left: "50%",
          right: "5%",
          bottom: "10%"
        },
        xAxis: {
          show: false
        },
        yAxis: [
          {
            data: titlename,
            show: true,
            inverse: true,
            axisLine: {
              show: false
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              color: "#fff",
              rich: {
                lg: {
                  backgroundColor: "#339911",
                  color: "#fff",
                  borderRadius: 15,
                  // padding: 2,
                  align: "center",
                  width: 15,
                  height: 15
                }
              }
            },

          },
          {
            data: [],
            show: true,
            inverse: true,
            axisLine: {
              show: false
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
          }
        ],
        series: [
          {
            name: "xxx",
            type: "bar",
            yAxisIndex: 0,
            data: data,
            barCategoryGap: 50,
            barWidth: 10,
            itemStyle: {
              normal: {
                barBorderRadius: 20,
                color: function (params) {
                  var num = myColor.length;
                  return myColor[params.dataIndex % num];
                }
              }
            },
            label: {
              normal: {
                show: true,
                position: "inside",
                formatter: "{c}%"
              }
            }
          },
          {
            name: "xxx",
            type: "bar",
            yAxisIndex: 1,
            barCategoryGap: 50,
            //数据总值
            // data: [100, 100, 100, 100, 100],
            data: values,
            barWidth: 15,
            itemStyle: {
              normal: {
                color: "none",
                borderColor: "#00c1de",
                borderWidth: 1,
                barBorderRadius: 15,
              }
            }
          }
        ]
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
      window.addEventListener("resize",function(){
        myChart.resize();
      });
    }
  }
}
</script>

<style scoped>

</style>
